<template>
	<view class="p-2">
		<u-navbar title="确认订单" placeholder autoBack></u-navbar>
		<template v-if="path">
			<commonPath :item="path" @click="choosePath" style="border-radius: 16rpx;"></commonPath>
		</template>
		<template v-else>
			<!-- 	<view class="">
				<u-image src="/static/address.png" width="22" height="22"></u-image>
			</view> -->
			<view class="bg-white p-2 border-bottom flex align-center" style="border-radius: 16rpx;"
				@click="choosePath">
				<view style="display: flex;align-items: center;">
					<!-- <u-image src="/static/address.png" width="10" height="10"></u-image> -->
					<image class="address-icon-image" src="/static/address.png" mode=""></image>
					<view class="text-light9 font-28 ml-2">选择收货地址</view>
				</view>
				<view class="ml-auto">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</template>
		<!-- 商品详情 -->
		<view class="mt-2 brStyle">
			<view class="bg-white p-2" v-for="(item,index) in goodsList" :key="index" :class="{'brStyle': index == 0}">
				<orderItem :item="item" type="cart"></orderItem>
			</view>
		</view>
		<view class="bg-white p-2">
			<view class="flex align-center justify-between" style="height: 60rpx;">
				<view class="font-28 text-light6">商品总价</view>
				<view class="font-30 text-main">¥{{totalPrice}}</view>
			</view>
			<view class="flex align-center justify-between" style="height: 60rpx;" @click="clickCoupon">
				<view class="font-28 text-light6">优惠卷</view>
				<view class="font-30 text-main"><span
						v-if="couponItem.money">￥</span>{{couponItem.money?couponItem.money:'暂未使用优惠卷'}}</view>
			</view>
			<!-- <view class="flex align-center justify-between" style="height: 60rpx;">
				<view class="font-28 text-light6">商品运费</view>
				<view class="font-30 text-main">￥{{ziti?'0':freightprice}}</view>
			</view> -->

			<!-- <view class="flex align-center justify-between" style="height: 60rpx;">
				<view class="font-28 text-light6">开具发票</view>
				<commonPrice :price="price"></commonPrice>
				// invoice_title
				<view class="ml-auto"> 
					<u-text v-if="!invoice.invoice_title" suffixIcon="arrow-right" text="选择发票类型" size="12"
						:iconStyle="{color:'#757575'}" @click="clickshow"></u-text>
					<u-text v-else suffixIcon="arrow-right" :text="invoice.invoice_title===1?'个人':'单位'" size="12"
						:iconStyle="{color:'#757575'}" @click="clickshow"></u-text>
				</view>
			</view> -->
		</view>
		<u-line color="#f9f9f9"></u-line>
		<view class="bg-white p-2 flex align-center" style="border-radius: 0 0 16rpx 16rpx;">
			<view class="text-main font-28 font-weight-bold">实付款</view>
			<view class="ml-auto font-24" style="color: #e65350;font-weight: bold;">
				￥
				<text style="font-size: 28rpx;">{{price}}</text>
			</view>
		</view>
		<!-- 备注 -->
		<view class="bg-white mt-2" style="border-radius: 16rpx;display: flex;flex-direction: column;">
			<view class="font-28 text-light6 px-2 mt-2">备注</view>
			<!-- <u-input inputAlign="right" placeholder="请输入备注" border="none" :customStyle="{height:'60rpx'}"></u-input> -->
			<u-textarea placeholder="请输入填写备注信息" border="none" v-model="remarks"></u-textarea>
		</view>

		<view class="" style="height: 100rpx;"></view>

		<!-- 底部 -->
		<view class="fixed-bottom flex align-center justify-between bg-white px-2" style="height: 100rpx;">
			<view class="flex align-center justify-center font-weight-bold">
				<view class="text-main font-28 ">共{{goodsList.length}}件 应付：</view>
				<commonPrice :price="price"></commonPrice>
			</view>
			<view class="sunmint" @click="submint">
				立即支付
			</view>
		</view>

		<!-- 发票弹出层 -->
		<electronicInvoice :show="show" @click="invoice"></electronicInvoice>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				path: '',
				freight: 0,
				cartids: [],
				goods: [],
				remarks: '',
				freightprice: 0,
				ziti: false,
				show: false,
				invoice: {},
				couponItem: {}, // 优惠卷信息
				goodsList: []
			}
		},
		computed: {
			...mapState({
				list: state => state.cart.list
			}),
			...mapGetters([
				'defaultPath',
				'totalPrice'
			]),
			// 商品列表
			// goodsList() {
			// 	if(this.items){
			// 		return this.items.map(id => {
			// 			return this.list.find(v => v.cart_id === id)
			// 		})
			// 	}
			// },
			// 最终价格
			price() {
				if (this.couponItem.money) {
					let total = 0
					this.goodsList.forEach(item=>{
						total +=(Number(item.price)*100*Number(item.goods_num))
					})
					return Number((total / 100).toFixed(2)) - Number(this.couponItem.money)
				} else {
					let total = 0
					this.goodsList.forEach(item=>{
						total +=(Number(item.price)*100*Number(item.goods_num))
					})
					return Number((total / 100).toFixed(2))
				}
			},
		},
		onLoad(e) {
			this.items = JSON.parse(e.detail)
			this.getdefaultPath()
			this.goodsList1(this.items)
		},
		mounted() {
			uni.$on('chooseCoupon', res => {
				console.log(res)
				this.couponItem = res
				// this.getfreightPrice(this.path.address_id)
			})
			uni.$on('choosePath', res => {
				console.log("res", res)
				this.path = res
				// this.getfreightPrice(this.path.address_id)
			})
			// 关闭弹窗
			uni.$on('invoice', (data) => {
				this.show = data.show
			})
			// 发票弹窗确认
			uni.$on('invoiceComfirm', (invoice) => {
				this.invoice = invoice.invoice
				this.show = invoice.show
			})
		},
		methods: {
			// 商品列表
			goodsList1(items) {
				this.goodsList = items.map(id => {
					return this.list.find(v => v.cart_id === id)
				})
				console.log(this.goodsList)
			},
			clickCoupon() {
				this.$u.route('pages/user/coupon?isChoose=创建订单页面', {
					type: 'choose'
				})
			},
			// 打开弹框
			clickshow() {
				this.show = true
			},
			getdefaultPath() {
				this.$api.addresslists().then(res => {
					if (res.code === 1) {
						this.path = res.data.length > 0 ? res.data[0] : false
						if (res.data.length > 0) {
							// this.getfreightPrice(this.path.address_id)
						}
					}
				})
			},
			// getfreightPrice(addressId){
			// 	this.goodsList.map(item=>{
			// 		this.goods.push({
			// 			goods_id:item.goods_id,
			// 			item_id:item.item_id,
			// 			num:item.goods_num,
			// 		})
			// 		this.cartids.push(item.cart_id)
			// 	})

			// 	let parmar = {
			// 		type:'cart',
			// 		goods:JSON.stringify(this.goods),
			// 		address_id:addressId,
			// 		cart_id:this.cartids.join(','),
			// 	}

			// 	this.$api.freightprice(parmar).then(res=>{
			// 		if(res.code === 1){
			// 			this.freightprice = res.data
			// 		}
			// 	})

			// },
			choosePath() {
				this.$u.route('pages/user/path', {
					type: 'choose'
				})
			},
			submint() {
				if (!this.path) {
					return uni.$u.toast('请选择收货地址')
				}
				let goods = []
				let carts = []
				this.goodsList.map(item => {
					goods.push({
						goods_id: item.goods_id,
						item_id: item.item_id,
						num: item.goods_num,
					})
					carts.push(item.cart_id)
				})
				let parmar = {
					type: 'cart',
					goods: JSON.stringify(goods),
					pay_way: 3,
					address_id: this.path.address_id,
					remarks: this.remarks,
					cart_id: carts.join(','),
					totalPrice: this.price,
					logistics: 2,
					coupon_id: this.couponItem.id,
					...this.invoice
				}
				// 生成订单
				this.$api.submitorder(parmar).then(res => {
					if (res.code === 1) {
						this.orderPay(res.data.order_id)
					} else if (res.code == '-301') {
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/user/index'
							})
						}, 1000)
					}
				})
				// uni.$u.route('pages/index/cashierdesk',parmar)
			},
			orderPay(orderId) {
				let parmar = {
					order_id: orderId,
					pay_way: 1
				}
				if (uni.$u.platform === 'mp') {
					this.$api.wxpay(parmar).then(res => {
						if (res.code === 1) {
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.timeStamp,
								nonceStr: res.data.nonceStr,
								package: res.data.package,
								signType: res.data.signType,
								paySign: res.data.paySign,
								success: (res) => {
									uni.$u.route({
										type: 'redirectTo',
										url: 'pages/user/order'
									})
								}
							})
						}

					})
				}
			}
		}

	}
</script>

<style>
	.address-icon-image {
		width: 30rpx;
		height: 40rpx;
		flex-shrink: 0;
	}

	.sunmint {
		display: flex !important;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background: linear-gradient(123deg, #ff5d26 0%, #ff5d26 100%);
		color: white;
		border-radius: 12rpx;
		width: 230rpx;
		height: 78rpx;
		margin-left: 10rpx;
		font-size: 36rpx;
	}

	.confirmStyle {
		display: flex !important;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background: linear-gradient(123deg, #ff5d26 0%, #ff5d26 100%);
		color: white;
		border-radius: 12rpx;
		width: 660rpx;
		height: 100rpx;
		margin-left: 10rpx;
		font-size: 36rpx;
	}

	.brStyle {
		border-radius: 16rpx 16rpx 0 0;
	}
</style>